import React,{useState} from 'react';
import {Link} from "react-router-dom"
import 'antd/dist/antd.css'
import { Space,Carousel,Row,Col,Button,Divider,Avatar} from 'antd';
import './home.css'
import { ReloadOutlined,RightOutlined } from '@ant-design/icons';
const contentStyle :any= {
    height: '350px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };
  const style:any = { background: '#0092ff', padding: '8px 0',height:'160px'};
  const style1:any = { background: '#0092ff', padding: '8px 0',height:'300px'};
function Home(){

    return(
        <div className='Home'>
            <div className="show-home">
                <div className="show-carousel">
                <Carousel autoplay>
                    <div>
                    <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}>4</h3>
                    </div>
                </Carousel>
                </div>
                <div className='block'></div>
                <div className="show-Change">
                    <Row  gutter={[16, 8]}>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={8} >
                        <div style={style}>col-6</div>
                        </Col>
                    </Row>
                </div> 
                <div className="">
                    <Button type='link' shape="circle"><Avatar className='show-Change-button' size={45} icon={<ReloadOutlined />} /></Button>
                </div>
            </div>
            <div className='browsed'>
             <Divider orientation="left"><li className='next-title'>最近浏览</li></Divider>
            <div className="next-browsed">
                <Row gutter={[16, 8]}>
                <div className='block'></div>
                    <Col className='browsed-col' span={4} > <div style={style1}>col-6</div> </Col>
                    <Col className='browsed-col' span={4} > <div style={style1}>col-6</div></Col>
                    <Col className='browsed-col' span={4} > <div style={style1}>col-6</div></Col>
                    <Col className='browsed-col' span={4} > <div style={style1}>col-6</div> </Col>
                    <Col className='browsed-col' span={4} > <div style={style1}>col-6</div> </Col>
                    <div className="browsed-button">
                    <Button type='link' shape="circle"><Avatar className='next-col' size={62} icon={<RightOutlined />} /></Button>
                    </div>
                 </Row>
                <div className="about">
                <Divider orientation="left"></Divider>
                <Row gutter={[16, 8]}>
                <div className='block'></div>
                    <Col className='browsed-col' span={7} > <div className='last-about'>
                    <li>关于</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </div> </Col>
                    <Col className='browsed-col' span={7} > <div className='last-about' >
                    <li>支持</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        </div></Col>
                    <Col className='browsed-col' span={7} > <div className='last-about' >
                    <li>社区</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        </div></Col>
                 </Row>
                </div>
            </div>
            </div>
        </div>
    )
}
export default Home;